// 银行卡列表
<template>
    <div>
        <GoBack :location='location' ></GoBack>
        <div class="bankCardBox">
             <p class="adselfBox">我的银行卡</p>
             <div class="bankListBox clearfix"  v-show='isNocard'>
                 <div class="bankItem" v-for='(item,index) in cardList' :key = 'index'>
                     <p class="bankname">{{item.title}}</p>
                     <p class="bankNo">{{item.card_number}}</p>
                     <p class="bankBtn" @click="delCard(item.id)">删除银行卡</p>
                 </div>
             </div>
             <div class="btnBox"  v-show='isNocard && isCardLenght' @click="addcard">
                <p>添加银行卡</p>
             </div>
             <NoCard v-show='!isNocard'></NoCard>
        </div>
    </div>
</template>
<script>
import GoBack from '../goback'
import NoCard from './assembly/nobankcard'
export default {
    components: {
        GoBack,
        NoCard
    },
    data () {
        return {
            cardList:[],
            isNocard:true, //判断有无银行卡
            isCardLenght:true, //判断银行卡多少，多于6张，不可再添加
            location:"/usercenter"
        }
    },
    mounted () {
        this.getBankCardList();
    },
    methods: {
        delCard(id){ //删除银行卡
            let uid = this.$store.state.userInfo.id;
            this.https('user/getDeleteUserBankCard',{id:id,uid:uid})
            .then(() => {
                let root = [];
                for(var i in this.cardList){
                    if(this.cardList[i].id != id){
                        root.push(this.cardList[i]);
                    }
                }
               if(root.length>0){
                    this.cardList = root;
               }else{
                   this.isNocard = false; 
               }
            });
        },
        addcard(){ //新增银行卡
             this.$router.push('/AddBankCard');    
        },
        getBankCardList(){ //获取银行卡列表
            let uid = this.$store.state.userInfo.id;
            this.https('user/getObtainUserBankById',{uid:uid})
            .then(data => {
                this.cardList = data.list;
                if(data.list.length == 0){
                    this.isNocard = false;
                }
                if(data.list.length >= 6){
                    this.isCardLenght=false;
                }
            })
        },
    }
}
</script>
<style lang="less" scoped>
@import url(../../assets/css/usercenter/bankcardlist.less);
</style>


